<template>
	<upper-navigation> <back-btn /> 新闻列表 </upper-navigation>
	<view id="news-list">
		<navigator class="list-item" v-for=" (item , index) in page.List" :key="index">
			<view class="topic">
				{{ item.Topic }}
			</view>
			<view class="created-by">
				<view class="author">
					{{item.Author}}
				</view>
				<view class="creat-time">
					{{ item.CreatedOn }}
				</view>
			</view>
		</navigator>
	</view>
	
	
	<bottom-bar></bottom-bar>
</template>

<script setup>
	import upperNavigation from './upperNavigation.vue'
	import bottomBar from './bottomNavigationBar.vue'
	import backBtn from '../DigitalPlatform/back.vue'
	import { reactive } from "vue";
	import { onReachBottom } from '@dcloudio/uni-app';
	const page = reactive({
		List: [],
		Page: 1,
		PageSize: 10,
	})
	const data = [];
	
	getData()
	
	function getData () {
		for(let index = 0; index <= 50 ; index ++) {
			data.push({
				Author: 'Author' + index ,
				CreatedOn: '2023年8月14日',
				Topic: '这是一个很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的标题'+index,
				uniqueCode: '',
			})
		}
		console.log(data)
	}
	
	
	getList();
	
	onReachBottom(()=>{
		console.log(123);
		page.Page ++;
		getList ();
	})
	
	function getList () {
		//获取 page页面的 数据
		// let msg = await uni.post("", {
		// 	Page: dataSourse.Page,
		// 	PageSize: dataSourse.PageSize,
		// })
		// 将该页面数据添加到 list中
		// page.List.push(msg.data)
		page.List.push(...data.slice( (page.Page-1)*page.PageSize , page.Page*page.PageSize));
		console.log(page.List);
	}
	
	
</script>

<style lang="less">
	.back-btn {
		background-color: rgba(0, 0, 0, 0.2);
	}
	#news-list {
		padding: 0 30rpx;
		.list-item {
			margin: 30rpx 0;
			border-bottom: 1rpx solid #d4c4c4;
			.topic {
				font-size: 45rpx;
				font-weight: bold;
				margin-bottom: 15rpx;
				word-wrap: break-word;
				display: -webkit-box;
				-webkit-line-clamp: 2; /* 控制最大行数为2 */
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.created-by {
				display: flex;
				margin-bottom: 15rpx;
				color: #7e7e7e;
				.author {
					margin-right: 25rpx;
				}
				.creat-time {
					
				}
			}
		}
	}
</style>